<template>
  <div @click="onTagSelect" class="tagItem">
    <a-checkbox class="tagItem-checkbox" style="pointer-events: none" :checked="visible">
      <i class="tagItem-checkbox-icon xicon-tag2" :style="{ color: tagData.color }"></i>
      <span class="tagItem-checkbox-label">{{ tagData.labelName }}</span>
    </a-checkbox>
  </div>
</template>
<script>
  export default {
    name: 'TagItem',
    props: {
      listData: {},
      tagData: {},
      onTagChange: {
        // 修改tag数据
        type: Function
      }
    },

    data() {
      return {
        visible: false
      };
    },
    created() {
      const labelIds = this.listData.labels || [];
      this.visible = labelIds.find((v) => v.id === this.tagData.labelId);
    },
    methods: {
      onTagSelect() {
        this.visible = !this.visible;
        this.$emit('tagChange', {
          visible: this.visible,
          id: this.listData.id,
          labelId: this.tagData.labelId,
          labels: this.listData.labels
        });
      }
    }
  };
</script>

<style lang="scss">
  .tagItem {
    width: 100%;
    &-checkbox {
      width: 100%;
      height: 34px;
      display: flex;
      align-items: center;
      .ant-checkbox + span {
        padding-left: 4px;
        display: flex;
        width: 100%;
      }
      &-label {
        overflow: hidden;
        white-space: nowrap;
        align-items: center;
        text-overflow: ellipsis;
      }
      &-icon {
        margin-right: 3px;
      }
    }
  }
</style>
